<script setup>
import { reactive, ref, onMounted } from 'vue'
import { get, post } from '@/myaxios'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import router from '@/router'


const user = reactive({
    username: '',
    password: ''
})

const loginFormRef = ref()

const onSubmit = () => {
    loginFormRef.value.validate((valid,field)=>{
        if(valid){
            //弹验证窗
            isShow.value = true;
        }
    })
}

/**
 *          
 * 
 * 
 */



const onReset = ()=>{
    loginFormRef.value.resetFields()
}

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 4, max: 8, message: '长度4-8位', trigger: 'blur' },
    ]
})


import Vcode from "vue3-puzzle-vcode";

const isShow = ref(false);


const onClose = () => {
  isShow.value = false;
};

const onSuccess = () => {
  console.log("验证成功 执行自己的流程");
     //console.log('发送ajax请求', user);
     post("/login",user)
            .then(resp=>{
                if(resp.data.code == 1001) {
                    ElMessage.error(resp.data.msg)
                }else if(resp.data.code == 1002){
                    ElMessage.info(resp.data.msg)
                }else if(resp.data.code == 1000){
                    //1.弹窗结果
                    ElMessage.success(resp.data.msg)
                    //2.数据存入前端缓存
                    //loginUserMenus loginUser
                    sessionStorage.loginUser = JSON.stringify(resp.data.returnData.loginUser) 
                    sessionStorage.loginUserMenus = JSON.stringify(resp.data.returnData.loginUserMenus)
                    //3.切换到主页面
                    router.push('/main')
                }
            })


  onClose(); // 验证成功，手动关闭模态框
};


</script>

<template>
    <el-card  class="loginPanel" style="max-width: 390px">
        <template #header>
            <div class="card-header">
                <img src="../assets/login.png">
            </div>
        </template>
        <el-form ref="loginFormRef" hide-required-asterisk :model="user" :rules="rules" label-width="65" style="max-width: 390px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username" :suffix-icon="User" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="user.password" :suffix-icon="Lock" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" color="#626aef" @click="onSubmit">登录</el-button>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>

    </el-card>

    <Vcode :show="isShow" @success="onSuccess" @close="onClose"/>
    <!-- <button @click="onShow">开始验证</button> -->

</template>

<style scoped>
.loginPanel {
    margin: 300px auto;
    background-color: rgba(196, 196, 196, 0.356);
}
</style>